<template>
  <BasicModal
    v-bind="$attrs"
    title="表单"
    @register="register"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :destroyOnClose="true"
    :minHeight="600"
    :width="1000"
  >
    <Tabs type="line" v-model:activeKey="formActiveKey">
      <TabPane v-for="(item, index) in formData" :key="index" :tab="item.tabName">
        <BasicForm
          :labelCol="{ span: 8 }"
          :wrapperCol="{ span: 16 }"
          :schemas="getSchemas(item.formItems)"
          :showActionButtonGroup="false"
          @register="(form) => registerForm(form, index)"
        />
      </TabPane>
    </Tabs>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm } from '/@/components/Form';
  import { Tabs, TabPane } from 'ant-design-vue';

  const formRefs = ref<Record<string, any>>({}); // 存储每个 `BasicForm` 实例
  const formActiveKey = ref<string>('基本属性');
  const formData = ref<any[]>([]);
  const type = ref('');

  // 确定
  const handleSubmit = async () => {
    const result: Record<string, any> = {};
    for (const key in formRefs.value) {
      result[key] = await formRefs.value[key].getFieldsValue();
    }
    console.log('所有表单数据：', result);
    handleCancel();
  };

  // 取消
  const handleCancel = () => {
    closeModal();
  };
  // 初始化数据
  const [register, { setModalProps, closeModal }] = useModalInner(async () => {
    setModalProps({ confirmLoading: false });
  });
  // 绑定表单实例
  const registerForm = (form, key) => {
    formRefs.value[key] = form;
  };
  // 生成 schemas
  const getSchemas = (attributes) => {
    return attributes.map((item) => ({
      field: item.prop,
      label: item.name,
      component: getPropertyComponent(item.propertyType),
      defaultValue:
        type.value === '新增' && item.propertyType === 'select' ? '' : getDefaultValue(item),
      required: item.pdmnull === 0,
      colProps: {
        span: parseInt(item.col, 10),
      },
      componentProps: {
        options: item.dataSource.map((item) => ({
          label: item.name,
          value: item.id,
        })),
        disabled: type.value === '查看',
      },
    }));
  };
  // 辅助函数，根据不同的 propertyType 返回对应的组件类型
  const getPropertyComponent = (propertyType) => {
    switch (propertyType) {
      case 'varchar':
        return 'Input'; // 示例中假设 varchar 对应 Input 组件
      case 'int':
        return 'InputNumber'; // 示例中假设 int 对应 InputNumber 组件
      case 'datetime':
        return 'DatePicker'; // 示例中假设 datetime 对应 DatePicker 组件
      case 'select':
        return 'Select'; // 示例中假设 select 对应 Select 组件
      default:
        return 'Input'; // 默认使用 Input 组件
    }
  };
  const getDefaultValue = (property) => {
    if (property.propertyId === 'status') {
      const statusMap = {
        '1': '检出',
        '8': '生效',
        '16': '废止',
      };
      return statusMap[property.defaultValue] || '未知状态';
    }
    return property.defaultValue;
  };
</script>

<style lang="less" scoped></style>
